<template>
  <div>
    <nuxt />
    <mt-tabbar v-model="selected" class="footer">
      <mt-tab-item id="外卖">
        <img
          v-if="selected === '外卖'"
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/home_fill.png"
        />
        <img
          v-else
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/home.png"
        />
        外卖
      </mt-tab-item>
      <mt-tab-item id="搜索">
        <img
          v-if="selected === '搜索'"
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/find_fill.png"
        />
        <img
          v-else
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/find.png"
        />
        搜索
      </mt-tab-item>
      <mt-tab-item id="订单">
        <img
          v-if="selected === '订单'"
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/order_fill.png"
        />
        <img
          v-else
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/order.png"
        />
        订单
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img
          v-if="selected === '我的'"
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/people_fill.png"
        />
        <img
          v-else
          slot="icon"
          src="https://suhoo.oss-cn-shenzhen.aliyuncs.com/tabIcon/people.png"
        />
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '外卖'
    }
  },
  watch: {
    selected: function(val) {
      // 这里就可以通过 val 的值变更来确定
      if (val === '外卖') {
        this.$router.push('/')
      } else if (val === '搜索') {
        this.$router.push('/search')
      } else if (val === '订单') {
        this.$router.push('/order')
      } else if (val === '我的') {
        this.$router.push('/me')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.footer{
  position fixed
  width 100%
  left 0
  bottom 0
  z-index 1000
}
</style>
